@import "../../../src/style/vars";
@import "../../../src/style/mixin";

$--header-height: 60px;
$--color-primary-dark-1: mix($--color-black, $--color-primary, 2%);
$--color-primary-dark-2: mix($--color-black, $--color-primary, 5%);
.top-header {
  height: $--header-height;
  background: $--color-primary;
  padding: 0 10px 0 0;
  font-size: 0;
  &__logo {
    @include inline-block;
    width: 64px;
    text-align: center;
    border-right: 1px solid hsla(180, 77%, 76%, .1);
    height: $--header-height;
    cursor: pointer;
    img {
      width: 36px;
      margin-top: 10px;
    }
  }
  &__title {
    @include inline-block;
    line-height: $--header-height;
    color: $--color-primary-light-9;
    font-size: 20px;
    text-shadow: 2px 2px 2px #666;
    min-width: 250px - 64px;
    span {
      margin-left: 10px;
      cursor: pointer;
    }
  }
  &__nav {
    @include inline-block;
    &--expand {
      padding-left: 40px;
    }

    .xdh-menu, .el-submenu .el-menu, .el-menu-item, .el-submenu .el-menu-item {
      background-color: $--color-primary;
    }
    .el-submenu .el-submenu__title, .el-submenu__title i, .el-menu-item, .el-submenu:focus > .el-submenu__title, .el-menu-item i {
      color: $--color-primary-light-8;
    }
    .el-menu-item.is-active, .el-submenu.is-active .el-submenu__title {
      color: $--color-primary-light-9 !important;
      border-bottom: 2px solid $--color-warning;
      background-color: $--color-primary-dark-2 !important;
    }
    .el-submenu.is-active .el-menu-item {
      border-bottom: none;
    }
    .el-menu-item:hover, .el-submenu .el-submenu__title:hover {
      background-color: $--color-primary-dark-1 !important;
      color: $--color-primary-light-9 !important;
    }
    @at-root {
      .top-header {
        .el-menu--horizontal {
          .el-menu--popup {
            background: $--color-primary;
            .el-menu-item {
              background: $--color-primary;
              color: $--color-primary-light-9;
            }
            .el-menu-item:hover, .el-submenu .el-submenu__title:hover {
              background-color: $--color-primary-dark-1;
              color: $--color-primary-light-9;
            }
            .iconfont, [class^="el-icon-"], [class*=" el-icon-"] {
              color: $--color-primary-light-9;
            }
          }
        }
      }
    }
    .el-menu-item-group__title {
      color: $--color-primary-light-4;
    }

  }

  &__tools {
    color: $--color-primary-light-7;
    text-align: right;
    height: $--header-height;
    user-select: none;
    font-size: 14px;
    .tool-item {
      @include inline-block;
      padding: 0 10px;
      [class^="el-icon-"], [class*=" el-icon-"], .iconfont {
        font-size: 20px;
        line-height: $--header-height;
        cursor: pointer;
        vertical-align: middle;
      }
      .el-dropdown {
        color: $--color-primary-light-7;
        line-height: $--header-height;
        cursor: pointer;
      }
    }
    .tool-search {
      @include inline-block;
      width: 250px;
      height: $--header-height;
      padding: 0 10px;
      .el-input {
        margin-top: 15px;
      }
      .el-input__inner {
        background: $--color-primary-light-4;
        border: none
      }
      .el-input__inner:focus {
        background: $--color-primary-light-5;
      }
      .el-input__icon {
        color: $--color-primary-dark-2;
      }
      &__icon {
        height: $--header-height;
        line-height: $--header-height;
        display: inline-block;
        i {
          font-size: 20px;
          vertical-align: middle;
        }
      }
    }

    .tool-item:hover {
      color: $--color-primary-light-9;
      background-color: $--color-primary-dark-1;
    }
  }
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.2s;
  opacity: 1;
}

.slide-right-enter, .slide-right-leave-active {
  opacity: 0;
  width: 0;
}
